<template>
    <div>
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000" @change="changeTab">
            <van-tabbar-item >
                <van-icon class="iconfont icon-xiazai45" size="20" slot="icon"></van-icon>
                <span>首页</span>
            </van-tabbar-item>
            <van-tabbar-item >
                <van-icon class="iconfont icon-faxian" size="20" slot="icon"></van-icon>
                <span>发现</span>
            </van-tabbar-item>
            <van-tabbar-item >
                <van-icon class="iconfont icon-tianjia" size="20" slot="icon"></van-icon>
                <span>定制行程</span>
            </van-tabbar-item>
            <van-tabbar-item >
                <van-icon class="iconfont icon-mudedi" size="20" slot="icon"></van-icon>
                <span>目的地</span>
            </van-tabbar-item>
            <van-tabbar-item >
                <van-icon class="iconfont icon-wo" size="20" slot="icon"></van-icon>
                <span>我的</span>
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
// 引入需要使用的vant组件
import Vue from 'vue';
import { Tabbar, TabbarItem,Icon } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
Vue.use(Icon);

// 引入需要的字体样式
import '@/assets/iconfont1/iconfont.css'
export default {
    data() {
        return {
            active:0,
            url:[
                '/',
                '/search',
                '/custom',
                '/home',
                '/user'
            ]
        };
    },
    methods:{
        changeTab(index){
            //本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录
            this.$router.push(this.url[index])
            
        }
    },
    created(){
        // 获取地址栏的信息
        let path=this.$route.path
        // console.log(path)
        let index=this.url.indexOf(path)
        // console.log(index)
        // 纠正索引
        this.active = path == "/index" ? 0 : index;
    },
    // 监测路由变化
    watch:{
        $route(to,from){
            this.path=to.path
            let index=this.url.indexOf(to.path)
            this.active=this.path == '/index'? 0:index
            // console.log(this.active)
        }
    },
}
</script>
<style scoped>

</style>